<!-- 营业-调整零头-弹窗组件 -->
<template>
  <CustomDialog v-model:visible="dialogVisible" top="8vh" curent-class="food-adjustment-dialog">
    <div class="dialog-content">
      <div class="title">调整零头</div>
      <div class="form-box">
        <div class="form-item">
          <div class="desc">现应收</div>
          <div class="dialog-input">
            <span>￥</span>
            <div class="amount-text">{{ receivableMoney }}</div>
          </div>
        </div>
        <div class="form-item">
          <div class="desc">调整额</div>
          <div class="dialog-input">
            <span>￥</span>
            <input class="input" v-model="adjustMoney" type="text" placeholder="请输入调整额" />
            <img
              class="image"
              src="@/assets/images/home/input-clear.png"
              alt=""
              @click="handleClearInput('adjustMoney')"
              v-if="adjustMoney"
            />
          </div>
        </div>
        <div class="money-info">当前应付金额：{{ payableMoney }}</div>
      </div>
      <!-- 数字键盘组件 -->
      <NumberKeyboard
        v-model:keyword="adjustMoney"
        @onInputKeyboard="onInputKeyboard"
        @onCancel="handleClearInput"
        @onConfirm="onConfirm"
        :loading="loading"
      />
    </div>
  </CustomDialog>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { deskOrderReduceMoney } from '@/api/desktop'
import { mathSubtract, mathAdd } from '@/utils/mathjsTool'
import NumberKeyboard from '@/components/NumberKeyboard/Index.vue'
import CustomDialog from '@/components/CustomDialog/Index.vue'

interface Props {
  modelValue: boolean
  deskDetail?: any
}

interface Emits {
  (e: 'update:modelValue', value: boolean): void
  (e: 'success'): void
  (e: 'refreshDesk'): void
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  deskDetail: null
})

const emit = defineEmits<Emits>()

// 对话框显示状态
const dialogVisible = computed({
  get: () => props.modelValue,
  set: val => emit('update:modelValue', val)
})

// 现应收金额
const receivableMoney = ref('')
// 调整金额
const adjustMoney = ref('')
// loading状态
const loading = ref(false)

// 当前应付金额
const payableMoney = computed(() => {
  let result = mathSubtract(Number(receivableMoney.value), Number(adjustMoney.value))
  if (typeof result === 'string') {
    return Number(result).toFixed(2)
  }
  return result
})

// 监听对话框打开状态
watch(
  () => dialogVisible.value,
  val => {
    if (val) {
      handleClearInput()
      if (props.deskDetail && props.deskDetail.orderInfo) {
        receivableMoney.value = mathAdd(
          mathSubtract(
            Number(props.deskDetail.orderInfo.model_money),
            Number(props.deskDetail.orderInfo.total_discount_money)
          ),
          Number(props.deskDetail.orderInfo.reduce_money || 0)
        ).toFixed(2)

        adjustMoney.value = (props.deskDetail.orderInfo.reduce_money || 0) + ''
      }
    }
  }
)

// 清空输入框
const handleClearInput = (type?: string) => {
  if (type === 'receivableMoney') {
    receivableMoney.value = ''
  } else if (type === 'adjustMoney') {
    adjustMoney.value = ''
  } else {
    adjustMoney.value = ''
  }
}

// 接收数字键盘传过来的关键词
const onInputKeyboard = (val: string) => {
  // 校验输入的金额不能超过现应收金额
  if (Number(val) > Number(receivableMoney.value)) {
    ElMessage.warning('调整金额不能超过现应收金额')
    // 将金额设置为现应收金额
    adjustMoney.value = receivableMoney.value
    return
  }
  adjustMoney.value = val
}

// 确认提交
const onConfirm = async () => {
  if (!adjustMoney.value) {
    ElMessage.warning('请输入调整金额')
    return
  }

  // 校验调整金额不能超过现应收金额
  if (Number(adjustMoney.value) > Number(receivableMoney.value)) {
    ElMessage.warning('调整金额不能超过现应收金额')
    return
  }

  try {
    loading.value = true
    const data = {
      // 桌台记录id
      record_id: props.deskDetail.id,
      // 抹零金额
      money: adjustMoney.value
    }

    const res = await deskOrderReduceMoney(data)
    if (res.status === 200) {
      ElMessage.success('操作成功')
      // 刷新数据
      emit('success')
      emit('refreshDesk')
      dialogVisible.value = false
    }
  } catch (error) {
    console.error('调整零头失败:', error)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped lang="scss">
.dialog-content {
  box-sizing: border-box;

  .title {
    font-size: 20px;
    font-family:
      PingFang SC,
      PingFang SC-Bold;
    font-weight: 700;
    text-align: center;
    color: #333333;
    margin-bottom: 30px;
  }

  .form-box {
    padding: 0 14px;
    margin-bottom: 20px;

    .form-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20px;

      .desc {
        font-size: 18px;
        font-weight: 500;
        color: #333333;
      }

      .dialog-input {
        width: 420px;
        height: 48px;
        background: #ffffff;
        border: 1px solid #d2d2d2;
        border-radius: 12px;
        box-sizing: border-box;
        padding: 0 20px;
        display: flex;
        align-items: center;

        span {
          margin-right: 5px;
          font-size: 16px;
          color: #333333;
        }

        .input {
          flex: 1;
          border: none;
          outline: none;
          font-size: 18px;
          font-weight: 500;
          color: #333333;
          height: 40px;
        }

        .amount-text {
          font-size: 18px;
          font-weight: 500;
          color: #333333;
        }

        .image {
          flex-shrink: 0;
          width: 24px;
          height: 24px;
          cursor: pointer;
        }
      }
    }

    .money-info {
      margin-top: 20px;
      font-size: 16px;
      font-weight: 400;
      color: #333333;
    }
  }
}
</style>
